<template>
  <div class="sign-container">
    <a-card title="注册" class="card">
      <a-form
        :model="formState"
        :rules="rules"
        name="basic"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
        @submit="onSubmit"
      >
        <img class="rabbit" src="@/images/兔子.png" alt="" />
        <div class="rabbits">
          <img src="@/images/兔子1号.png" alt="" />
          <img src="@/images/兔子3号.png" alt="" />
          <img src="@/images/兔子1号.png" alt="" />
        </div>
        <a-form-item label="用户名" name="username">
          <a-input v-model:value="formState.username" />
        </a-form-item>

        <a-form-item label="密码" name="password">
          <a-input-password v-model:value="formState.password" />
        </a-form-item>
        <a-form-item label="确认密码" name="confirm">
          <a-input-password v-model:value="formState.confirm" />
        </a-form-item>
        <a-button class="sign" type="primary" html-type="submit">注册</a-button>
        <router-link to="/login" class="to-login">已有账户？去登录</router-link>
      </a-form>
    </a-card>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { Modal } from 'ant-design-vue'
// 封装的请求
import $verify from '@/request/verify.js'
// 路由部分
import { useRouter } from 'vue-router'
const $router = useRouter()

const formState = reactive({
  username: '',
  password: '',
  confirm: '',
})

const checkUsername = async (_rule, value) => {
  if (value == '') {
    return Promise.reject('请输入用户名!')
  } else {
    // 检查是否重名
    await $verify.checkName({ username: value }).then((res) => {
      const { code } = res
      if (code == 250) {
        return Promise.reject('该用户名已被占用!')
      }
    })
  }
}

const checkPassword = async (_rule, value) => {
  if (value == '') {
    return Promise.reject('请确认密码!')
  } else if (value != formState.password) {
    return Promise.reject('两次输入不一致!')
  }
}

const rules = {
  username: [
    {
      required: true,
      validator: checkUsername,
      trigger: 'blur',
    },
  ],
  password: [
    {
      required: true,
      message: '请输入密码!',
      trigger: 'blur',
    },
  ],
  confirm: [
    {
      required: true,
      validator: checkPassword,
      trigger: 'blur',
    },
  ],
}

function onSubmit() {
  if (
    formState.username &&
    formState.password &&
    formState.confirm &&
    formState.password == formState.confirm
  ) {
    $verify.toSignin(formState).then((res) => {
      const { code, message } = res
      if (code == 200) {
        Modal.success({
          content: '注册成功,请登录!',
        })
        setTimeout(() => $router.push({ path: '/login' }), 1000)
      } else {
        Modal.warning({
          content: '注册失败!',
        })
      }
    })
  }
}
</script>

<style></style>

<style scoped>
.sign-container {
  height: 100vh;
  width: 100vw;
  background: #14b4c9;
}
.card {
  position: relative;
  top: 20vh;
  left: 35vw;
  width: 30vw;
  min-width: 400px;
  height: 60vh;
}
.rabbit {
  position: absolute;
  top: -20vh;
  left: -8vw;
  z-index: 999;
}
.rabbits {
  position: absolute;
  width: 25vw;
  min-width: 340px;
  position: absolute;
  top: -9vh;
  left: 8vw;
}
.card >>> .ant-card-head {
  height: 5vh;
  line-height: 2vh;
  text-align: center;
  background: rgb(226, 226, 226);
  border: 1px solid rgb(226, 226, 226);
  border-bottom: 1px solid #999;
  color: rgb(153, 153, 153);
  font-family: '隶书';
  font-size: 30px;
}
.ant-form {
  width: 24vw;
  min-width: 320px;
}
.sign {
  width: 10vw;
  min-width: 100px;
  height: 7vh;
  margin-left: 9vw;
  border-radius: 5px;
  border-color: rgb(20, 180, 201);
  background: rgb(20, 180, 201);
  color: white;
  font-size: 15px;
}
.to-login {
  position: absolute;
  bottom: 3vh;
  right: 4vw;
  text-decoration: underline;
}
</style>
